<template>
    <div >
        <div style="margin:2vw 5vw;color: #0a3d62">
            <el-page-header @back="goBack" content="问题原帖">
            </el-page-header>
        </div>
        <el-card class="title">
            <h2>{{question.title}}</h2>
            <el-row style="font-size: 15px">
                <span><i class="el-icon-user-solid"></i>发帖人:</span>
                <span style="color: #0a3d62">{{question.username}}</span>
            </el-row>
            <p class="txtPage">{{question.content}}</p>
            <el-row style="margin-top: 20px;font-size: 15px;">
                <span style="float: right;color: #0a3d62">
                     <i class="el-icon-alarm-clock"></i>提出时间:
                    <span style="color: #71777c">{{(new Date(question.createTime).getFullYear() === new Date().getFullYear()) ?
                                    (new Date(question.createTime).getMonth() === new Date().getMonth() ?
                                    (new Date(question.createTime).getDate() === new Date().getDate() ? '今天'+ (new Date(question.createTime).getHours()) + ":" + (new Date(question.createTime).getMinutes())
                                    :  new Date().getDate() - new Date(question.createTime).getDate() + '天前')
                                    : new Date().getMonth() - new Date(question.createTime).getMonth() + '月前')
                                    : new Date().getFullYear() - new Date(question.createTime).getFullYear() + '年前' }}
                    </span>
                </span>
            </el-row>
        </el-card>
        <div>
            <el-card class="title"
                     v-loading="loading"
                     element-loading-text="拼命加载中"
                     element-loading-spinner="el-icon-loading">
                <div >
                    <el-row style="font-size: 15px">
                        <span>
                            总回答数:
                            <span style="color: #59bf11">{{total}}</span>
                        </span>
                        <el-divider  direction="vertical"></el-divider>
                        <span @click="ToAnswer" style="cursor: pointer;color: #2c75d4">
                        <i class="el-icon-edit"></i>
                            <span style="">我要回答</span>
                        </span>
                        <span style="float: right;color: #0a3d62">
                     <i class="el-icon-alarm-clock"></i>最后更新时间:
                    <span style="color: #71777c">{{(new Date(questionInfo.updateTime).getFullYear() === new Date().getFullYear()) ?
                                    (new Date(questionInfo.updateTime).getMonth() === new Date().getMonth() ?
                                    (new Date(questionInfo.updateTime).getDate() === new Date().getDate() ? '今天'+ (new Date(questionInfo.updateTime).getHours()) + ":" + (new Date(question.updateTime).getMinutes())
                                    :  new Date().getDate() - new Date(questionInfo.updateTime).getDate() + '天前')
                                    : new Date().getMonth() - new Date(questionInfo.updateTime).getMonth() + '月前')
                                    : new Date().getFullYear() - new Date(questionInfo.updateTime).getFullYear() + '年前' }}
                    </span>
                </span>
                    </el-row>
                </div>
                <br>
                <div>
                    <div v-if="AnswerList[0]">
                        <div v-for="item in AnswerList" :key="item.id">
                            <div v-if="agreeId === item.id" style="color: #c74c41;position: relative">
                                <img class="good" src="../../assets/img/good.svg" alt="">
                                <span style="margin-left: 4.3%">
                            <i class="el-icon-s-flag"></i>已采纳
                             </span>
                            </div>
                            <div v-if="agreeId === null && questionInfo.username === username">
                             <span style="float: right;margin-right: 20px;">
                                <i style="color: #31bb22" class="el-icon-star-off"></i>
                                <el-button @click="ToCaiNa(item.question,item.id)" type="text" style="color: #0a5cce">采纳</el-button>
                            </span>
                            </div>
                            <p class="txtPage">
                                <VueMarkdown :source="item.content"></VueMarkdown>
                            </p>
                            <br>
                            <el-row>
                            <span class="time">
                            <i class="el-icon-alarm-clock"></i>
                        <span style="color: #71777c">{{(new Date(item.createTime).getFullYear() === new Date().getFullYear()) ?
                                (new Date(item.createTime).getMonth() === new Date().getMonth() ?
                                (new Date(item.createTime).getDate() === new Date().getDate() ? '今天'+ (new Date(item.createTime).getHours()) + ":" + (new Date(item.createTime).getMinutes())
                                :  new Date().getDate() - new Date(item.createTime).getDate() + '天前')
                                : new Date().getMonth() - new Date(item.createTime).getMonth() + '月前')
                                : new Date().getFullYear() - new Date(item.createTime).getFullYear() + '年前' }}</span></span>
                                <span class="person">
                            <i class="el-icon-user-solid"></i>回复人:
                            <span style="color: #666d5e;">{{item.username}}</span>
                        </span>
                                <div style="display: flex;">
                                    <vue-clap-button :maxClick="10" @cancel="ToCancel" @clap="ToPraise(item.id)" :colorNormal="'#8b9580'" :colorActive="'#4ed54b'" :size="6"></vue-clap-button>
                                    <span style="margin-left:16px;cursor:pointer;color: #6d8868">{{item.praise}}</span>
                                </div>
                            </el-row>
                            <el-divider content-position="right"><i class="el-icon-edit"></i></el-divider>
                        </div>
                    </div>
                    <div v-else>
                        <div style="text-align: center;margin: 20px 0">
                            还没有人提问哦~
                            <div style="margin-top: 30px">
                                <el-button @click="ToDiscuss" plain type="warning"><i class="el-icon-s-promotion"></i> 前往讨论区</el-button>
                            </div>
                        </div>
                    </div>
                </div>

            </el-card>
            <!--        文本编辑器-->
            <div style="margin-top: 40px">
                    <el-divider content-position="left"><i class="el-icon-share"></i>我要回答该问题</el-divider>
                    <br>
                    <template>
                        <div class="editor_box">
                            <mavon-editor
                                    class="editor"
                                    codeStyle="atom-one-dark"
                                    :ishljs="true"
                                    :alignleft="true"
                                    :toolbars="markdownOption"
                                    ref=md v-model="mdStr" ></mavon-editor>
                        </div>
                    </template>
                    <br><br>
                    <el-row style="margin: 20px auto;text-align: center">
                        <el-button plain type="warning" icon="el-icon-edit" @click="AnswerMd">提交回答</el-button>
                    </el-row>
                </div>
            <div class="foott">
               <span class="welcome txt">速速来提问呀~</span>
            </div>
        </div>

        <el-dialog
                :title="question.title"
                :visible.sync="openToAnswer"
                width="50%" @close="AnswerDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="AnswerForm" status-icon ref="AnswerFormRef">
                <el-form-item label="你对该问题的见解:" prop="responseContent">
                    <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}"
                              v-model="AnswerForm.content" placeholder="请输入你的回答" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <!--      底部区域-->
            <span slot="footer" style="display: flex;justify-content: center">
                  <el-button @click="Answer" plain type="warning"><i class="el-icon-magic-stick"></i>提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import VueMarkdown from 'vue-markdown'
    import '../../assets/css/doudong.css'
    export default {
        name: "Reply",
        components:{
            VueMarkdown
        },
        data(){
            return{
                question:'',
                AnswerForm:{
                    questionId: '',
                    content: '',
                    username:''
                },
                AnswerList:[],
                loading : true,
                total: 0,
                openToAnswer:false,
                id:'',
                // 编辑器功能
                markdownOption: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    readmodel: true, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: true, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: true, // 预览
                },
                mdStr: '',
                username:localStorage.getItem("username"),
                questionInfo:[]
            }
        },

        created() {
            this.getQuestionId()
        },
        methods:{
            getQuestionId(){
                let data = JSON.parse(this.$route.query.data)
                console.log(data)
                this.AnswerForm.questionId = data.id
                this.AnswerForm.username = localStorage.getItem("username");
                this.question = data
                this.agreeId = data.agreeId
                this.id = data.id
                this.getAnswerList()
            },
            async getAnswerList(){
                this.loading = true
                const { data: res } = await this.$http.get('/ask/findAnswerById/' + this.id)
                console.log(res)
                if(res.code !== 200){
                    this.loading = false
                    this.WarningMsg(res.msg)
                }
                this.questionInfo = res.data
                console.log(res.data.answer)
                this.getZhiDing(res.data.answer.reverse())
            },
            async ToCaiNa(questionId,agreeId){
                this.loading = true
                console.log(questionId,agreeId)
                const { data: res } = await this.$http.post('/ask/agree/',
                    {questionId: questionId,agreeId: agreeId})
                console.log(res)
                if(res.code !== 200){
                    this.loading = false
                    return this.WarningMsg(res.msg)
                }
                this.agreeId = agreeId
                this.WarningMsg(res.msg)
                this.getAnswerList()
                this.loading = false
            },
            getZhiDing(list){
                let arr = []
                let all = list
                for (let item in all) {
                    if(all[item].id == this.agreeId) {
                        arr.push(all[item])
                        // console.log(arr)
                    }
                }
                for (let item in all) {
                    if(all[item].id != this.agreeId) {
                        arr.push(all[item])
                    }
                }
                // console.log(arr)
                this.AnswerList = arr
                this.total = this.AnswerList.length ? this.AnswerList.length : 0
                this.loading = false
            },
            // 监听回答对话框的关闭事件
            AnswerDialogClosed () {
                this.$refs.AnswerFormRef.resetFields()
            },
            ToAnswer(){
                this.openToAnswer = true
            },
            ToDiscuss(){
                this.$router.push('/user/Home')
            },
            async Answer(){
                this.loading = true
                console.log(this.AnswerForm.content)
                if (this.AnswerForm.content) {
                    const { data: res } = await this.$http.post('/answer/add',this.AnswerForm)
                    console.log(res)
                    if(res.code !== 200){
                        this.loading = false
                        this.WarningMsg(res.msg)
                    }
                    this.getAnswerList()
                    this.openToAnswer = false
                    this.loading = false
                    this.$message.success('提交回答成功!')
                }
                else{
                    this.loading = false
                    this.WarningMsg('您还未回答哦~')
                }
            },

            async AnswerMd(){
                this.loading = true
                // console.log(this.mdStr)
                this.AnswerForm.content = this.mdStr
                if (this.mdStr) {
                    const { data: res } = await this.$http.post('/answer/add',this.AnswerForm)
                    // console.log(res)
                    if(res.code !== 200){
                        this.loading = false
                        this.WarningMsg(res.msg)
                    }
                    this.getAnswerList()
                    this.loading = false
                    this.mdStr = ''
                    this.$message.success('提交回答成功!')
                }
                else{
                    this.loading = false
                    this.WarningMsg('您还未回答哦~')
                }

            },
            ToCancel(){

            },
            async ToPraise(id){
                this.loading = true
                console.log(id)
                const { data: res } = await this.$http.get('/answer/praise/' + id)
                // console.log(res)
                if(res.code !== 200){
                    this.loading = false
                    this.WarningMsg(res.msg)
                }
                this.getAnswerList()
                this.loading = false
            },
            goBack(){
                this.$router.go(-1)
            },
            WarningMsg(msg) {
                const h = this.$createElement;
                this.$notify.warning({
                    title: '提示',
                    message: h('p', {style: 'color: teal'}, msg),
                    offset: 100,
                    duration: 3000
                });
            },

        }
    }
</script>

<style scoped>
    .title{
        margin-top: 10px;
        width: 90%;
        margin-left: 5%;
    }
    .time{
        float: right;
        /*margin-right: 10%;*/
        font-size: 10px;
    }
    .person{
        float: right;
        margin-right: 10px;
        font-size: 10px;
    }
    .txtPage{
        color: #153b1b;
        font-size: 10px;
        margin-left:4%;
        width: 94%;
        line-height:20px;
        word-wrap: break-word
    }
    .editor{
        min-height: 300px;
        width: 100%;
    }
    .editor_box{
        width: 80%;
        text-align: center;
        margin: auto;
    }
    .good{
        width: 4.4vw;
        height: 4.8vw;
        opacity: 0.8;
        position: absolute;
        transform: rotate(60deg);
    }
    .good:hover{
        transform: scale(1.1);
        transform: rotateX(40deg);
        cursor: pointer;
    }
    .foott{
        text-align: center;
        margin-top: 10px;
        height: 20px;
    }
    .txt{
        color: #690ba3;
        font-size: 9px;
    }
</style>
